<template>
  <div id="app">
    <el-container>
      <el-main class="center" >
        <el-row :gutter="20">
          <el-col :span="18">
            <!--文章详情相关-->
            <el-card>
              <h2 style="color: orange;text-align: center">
                {{ c.title }}
              </h2>
              <p style="font-size: 12px;color: #666;text-align: center">
                作者:{{ c.userName }} | 发布时间:{{ c.createTime}} | 发布地点：{{c.articleLocation}} |
                阅读次数:{{ c.views }} | 点赞次数：{{ c.liked }} | 收藏次数：{{ c.collect }} | 评论数量: {{c.comments}}
              </p>
              <el-divider></el-divider>
              <div>
<!--                <el-card style="font-size: 12px">
                  <b style="color: #409EFF">摘要:</b>
                  <p v-html="c.brief"></p>
                </el-card>-->
                <div>
                  <img style="width: 60%" :src="c.images">
                </div>
                <p  v-html="c.content">文章内容</p>
              </div>
              <div style="color: #1c84c6">
                <span>{{c.tags}}</span>
              </div>
              <div style="margin-left: 600px">
                <el-button type="success" icon="el-icon-thumb" :class="{liked: isLiked}" circle @click="likePost()"></el-button>
                <el-button type="warning" icon="el-icon-star-off" :class="{collected: isCollected}" circle @click="collectPost()"></el-button>
              </div>
            </el-card>


            <!--评论相关开始-->
            <el-card>
              <p>发一条友善的评论</p>
              <el-divider></el-divider>
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-input type="textarea"
                            v-model="comment.content"
                            placeholder="说点儿啥..."></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button @click="post()">发布</el-button>
                </el-col>
              </el-row>
              <!--评论列表开始-->
              <el-row v-for="(c,index) in commentArr" :key="index" style="margin: 5px 0">
                <el-col :span="2">
                  <el-avatar :src="c.icon"></el-avatar>
                </el-col>
                <el-col :span="22">
                  <span style="color: orange;font-weight: bold">{{c.userName}}:</span>
                  <p style="margin:5px 0">{{c.content}}</p>
                  <span style="color: #666;font-size: 12px">{{c.createTime}}</span>
                  <el-button style="margin-left: 30px" icon="el-icon-delete" size="mini" circle @click="commentDelete()"></el-button>
                </el-col>
              </el-row>
            <!--评论列表结束-->
            </el-card>
            <!--评论相关结束-->
          </el-col>
          <el-col :span="6">
            <!--右上角作者区域-->
            <el-card class="right-card" style="height: 240px;text-align: center;">
<!--              <div style="background-image: url('http://localhost:8080/imgs/b.jpg');
                        height: 90px"></div>-->
              <div style="position: relative;top: 45px">
                <img :src="'http://localhost:8008'+c.icon"
                     style="border-radius: 90px;border: 5px solid white;
                                width: 90px;height: 90px">
                <p style="font-size: 20px;margin: 0;
                            font-weight: bold">{{ c.userName }}</p>
                <i class="el-icon-edit">本文作者</i><br>
                <i class="el-icon-time">{{c.createTime}}</i>
              </div>
            </el-card>



            <!--作者其它文章开始-->
            <el-card style="margin:10px 0">
              <h3>作者其它文章</h3>
              <el-divider></el-divider>
              <!--文章列表开始-->
              <el-row :gutter="10" v-for="(c,index) in othersArr" :key="index">
                <el-col :span="10">
                  <a :href="'/frontEnd/articleDetail?id='+c.id">
                    <img :src="c.images" width="100%" height="70px">
                  </a>
                </el-col>
                <el-col :span="14">
                  <a style="color: #333;text-decoration: none"
                     :href="'/frontEnd/articleDetail?id='+c.id">
                    <p class="title_p" style="margin: 0;">{{c.title}}</p>
                  </a>
                  <i class="el-icon-time" style="color: #666">{{c.createTime}}</i>
                </el-col>
              </el-row>
              <!--文章列表结束-->
            </el-card>
            <!--作者其它文章结束-->

            <!--热门文章开始-->
            <el-card style="margin:10px 0">
              <h3>热门文章</h3>
              <el-divider></el-divider>
              <!--文章列表开始-->
              <el-row :gutter="10" v-for="(c,index) in hotArr" :key="index">
                <el-col :span="10">
                  <a :href="'/frontEnd/articleDetail?id='+c.id">
                    <img :src="c.images" width="100%" height="70px">
                  </a>
                </el-col>
                <el-col :span="14">
                  <a style="color: #333;text-decoration: none"
                     :href="'/frontEnd/articleDetail?id='+c.id">
                    <p class="title_p" style="margin: 0;">{{c.title}}</p>
                  </a>
                  <i class="el-icon-time" style="color: #666">{{c.createTime}}</i>
                </el-col>
              </el-row>
              <!--文章列表结束-->
            </el-card>
            <!--热门文章结束-->
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <Footer/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Footer from "@/views/common/Footer";
export default {
  components: {Footer},
  data: function () {

    return {
      isLiked: false,
      isCollected: false,
      likeCount:{},
      collectCount:{},
      id:new URLSearchParams(location.search).get("id"),
      c:{},
      othersArr:[],
      hotArr:[],
      comment:{},
      commentArr:[],
    }
  },
  computed: {
    likeLocalStorageKey() {
      return 'likeButtonState'; // 用于本地存储的键名
    },
    collectLocalStorageKey() {
      return 'collectButtonState'; // 用于本地存储的键名
    },
  },

  methods: {
    //发请求获取内容详情
    articleDetail() {
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:9090/v1/blogs/" + this.id + "/detail").then((response) => {
        if (response.data.code == 200) {
          this.c = response.data.data;
          //请求其它内容
          this.loadUserOtherContent();
          //后退一步至主页
          // history.pushState(null, null, 'http://localhost:8008/frontEnd/homePage');
        }
      })
    },
    //发请求获取评论列表
    commentList() {
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:9090/v1/comment/" + this.id + "/selectAll").then((response) => {
        if (response.data.code == 200) {
          this.commentArr = response.data.data;
        }
      })
    },
    //发布评论
    post(){
      if (this.comment.content.trim()==""){
        this.$message.error("请输入评论的内容!");
        return;
      }
      //设置被评论的内容id
      this.comment.blogId = this.c.id;
      let url = "http://localhost:9090/v1/comment/"+this.id+"/insert";
      let formData = this.qs.stringify(this.comment);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url,formData).then((response)=> {
        if (response.data.code == 1000){
          this.$confirm('是否确认登录?', '您当前未登录', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            location.href="/frontEnd/userLogin"

            /*let url = "http://localhost:9090/v1/blogs/" + this.id + "/detail"
            console.log("-------------------------------------------------------"+url)
            this.$router.push(url)*/
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消登录'
            });
          })
        }
        if (response.data.code==200){
          this.$message.success("评论发布成功!");
          this.commentList();
          this.articleDetail();
          this.comment.content = "";
        }
      })
    },

    //删除评论
    commentDelete(){
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:9090/v1/comment/"+this.comment.id+"/delete").then((response)=> {
        console.log("正在发起请求删除当前评论,评论id为:",this.comment.id);

      })

    },
    //请求当前文章作者其它内容
    loadUserOtherContent(){
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:9090/v1/blogs/"+this.c.userId+"/others").then((response)=> {
        console.log("正在处理请求当前文章作者其它内容");
        if (response.data.code==200){
          this.othersArr = response.data.data;
        }
      })
    },
    //点赞
    likePost() {
      if (this.isLiked) {
        this.isLiked = false; // 如果按钮已点击过，则将按钮状态设置为未点击
        localStorage.removeItem(this.likeLocalStorageKey); // 移除本地存储的按钮状态
      } else {
        this.isLiked = true; // 如果按钮未点击过，则将按钮状态设置为已点击
        localStorage.setItem(this.likeLocalStorageKey, JSON.stringify(this.isLiked)); // 存储按钮状态到本地
      }
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post("http://localhost:9090/v1/users/"+ this.id +"/like",this.likeCount).then((response)=>{
        if (response.data.code == 1000){

          this.$confirm('是否确认登录?', '您当前未登录', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            location.href="/frontEnd/userLogin"
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消登录'
            });
          })
        }
        if (response.data.code == 200){
          this.$message.success(response.data.data);
          this.articleDetail();
        }
      })
    },
    //收藏
    collectPost() {
      if (this.isCollected) {
        this.isCollected = false; // 如果按钮已点击过，则将按钮状态设置为未点击
        localStorage.removeItem(this.collectLocalStorageKey); // 移除本地存储的按钮状态
      } else {
        this.isCollected = true; // 如果按钮未点击过，则将按钮状态设置为已点击
        localStorage.setItem(this.collectLocalStorageKey, JSON.stringify(this.isCollected)); // 存储按钮状态到本地
      }
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post("http://localhost:9090/v1/users/"+ this.id +"/collect",this.collectCount).then((response)=>{
        if (response.data.code == 1000){
          this.$confirm('是否确认登录?', '您当前未登录', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            location.href="/frontEnd/userLogin"
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消登录'
            });
          })
        }
        if (response.data.code == 200){
          this.$message.success(response.data.data);
          this.articleDetail();
        }
      })
    },
  },

  mounted: function (){


    const storedLikeButtonState = localStorage.getItem(this.likeLocalStorageKey); // 从本地存储获取按钮状态
    if (storedLikeButtonState) {
      this.isLiked = JSON.parse(storedLikeButtonState); // 将按钮状态设置为本地存储的状态
    }
    const storedCollectButtonState = localStorage.getItem(this.collectLocalStorageKey); // 从本地存储获取按钮状态
    if (storedCollectButtonState) {
      this.isCollected = JSON.parse(storedCollectButtonState); // 将按钮状态设置为本地存储的状态
    }

    //发请求获取内容详情
    this.articleDetail();
    //发请求获取评论列表
    this.commentList();
    //发请求获取热门文章
    this.axios
        .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
        .get("http://localhost:9090/v1/blogs/hot").then((response) =>{
      if (response.data.code==200){
        this.hotArr = response.data.data;
      }
    })
  }
}
</script>
<style>
.center{
  width: 1200px;
  margin: 0 auto;
}
#footer_center p{
  margin: 0;
}
#footer_center h3{
  color: white;
}
body{
  background-color: rgb(241,242,243);
}
.el-header{
  background-color: white;
}

.right-card .el-card__body{
  padding: 0;/*去掉card自带的内边距*/
}
.title_p {
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.liked {
  background-color: red;
}

.collected {
  background-color: red;
}

</style>